<template>
  <div id="framHouseJW">
    <div class="grid">
      <div>
        <p style="text-align:center;margin-top:6px">
          <img width="40" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/5.png" alt="">
        </p>
        <p style="text-align:center">农房排查</p>
        <p style="color:#117cd6">992.59万户</p>
      </div>
      <div>
        <p style="text-align:center;margin-top:12px">
          <img width="40" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/6.png" alt="">
        </p>
        <p>疑似危房</p>
        <p style="color:#117cd6">17923户</p>
      </div>
      <div>
        <p style="text-align:center;margin-top:12px">
          <img width="40" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/7.png" alt="">
        </p>
        <p>危房鉴定</p>
        <p style="color:#117cd6">992.59万户</p>
      </div>
    </div>
    <div class="grid" style="margin-top:16px">
      <div>
        <p style="text-align:center;font-size:0.14em;font-weight:800">
          危房整治数量
        </p>
        <p style="text-align:center;font-size:0.16em;font-weight:800;color:#117cd6">
          12229户
        </p>
        <p style="">C级危房 <i>9026户</i></p>
        <p style="">D级危房 <i>3202户</i></p>
      </div>
      <div>
        <p style="text-align:center;font-size:0.14em;font-weight:800">
          一般户
        </p>
        <p style="text-align:center;font-size:0.16em;font-weight:800;color:#117cd6">
          12229户
        </p>
        <p style="">C级危房 <i>6240户</i></p>
        <p style="">D级危房 <i>2547户</i></p>
      </div>
      <div>
        <p style="text-align:center;font-size:0.144em;font-weight:800">
          困难家庭
        </p>
        <p style="text-align:center;font-size:0.16em;font-weight:800;color:#117cd6">
          3666户
        </p>
        <p style="">C级危房 <i>2952户</i></p>
        <p style="">D级危房 <i>714户</i></p>
      </div>
    </div>
    <div class="grid1">
      <div class="left">
        <div class="top">
          <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/8.png" width="20px" alt="">
          <span>补助发放数量</span>
        </div>
        <div class="bottom">
          <span>3666户</span>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/9.png" width="20px" alt="">
          <span>总金额</span>
        </div>
        <div class="bottom">
          <span>5172万元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }

  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
#framHouseJW {
  //   height: 50vh;
  overflow: auto;
  background: #ffffff;
  font-size: 6px;
  padding: 10px 10px 10px 0;
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    div {
      border: 1px solid #aaa;
      text-align: center;
    }
    p {
      line-height: 26px;
    }
  }
  .grid1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    height: 70px;
    margin-top: 16px;
    .left {
      background: #e6f5ff;
      .top {
        text-align: center;
      }
      .bottom {
        text-align: center;
        color: #188bd9;
      }
    }
    .right {
      background: #e6f5ff;
      .top {
        text-align: center;
      }
      .bottom {
        text-align: center;
        color: #188bd9;
      }
    }
  }
}
</style>
